<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="clientName" label="客户名称" width="120" />
        <el-table-column prop="contactName" label="联系人姓名" width="120" />
        <el-table-column prop="companyAddress" label="公司地址" width="150" />
        <el-table-column prop="phone" label="手机号" width="120" />
        <el-table-column prop="email" label="电子邮件" width="150" />
        <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
                <el-button link type="danger" :icon=Delete size="small" @Click="Del(scope.row.clientId)">删除</el-button>
                <el-button link type="warning" :icon="Edit" size="small" @Click="Upd(scope.row.clientId)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[15, 20, 25, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import { useRouter } from 'vue-router'
import { Wread, Wwrite } from "@/axios/axiosHelper";
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'

const router = useRouter()

const form = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalCount: 0,
    totalPage: 0,
})

///存储所有客户数据
const tableData = ref([])

//文档就系
onMounted(() => {
    Show();
})

///显示客户数据
const Show = () => {
    Wread.get("w2-read/api/Client/QueryClient",{
        params:{
            pageIndex: form.pageIndex,
            pageSize: form.pageSize
        }
    })
    .then(res=>{
        tableData.value = res.data.data;
        form.totalCount = res.data.totalCount;
        form.totalPage = res.data.totalPage;
    })
}


////分页
const handleSizeChange = (val: number) => {
  Show();
}
const handleCurrentChange = (val: number) => {
  Show();
}

///逻辑删除代码(修改状态，使他变成true,在后端查询代码中判断，Del=false显示，Del=true不显示)
const Del=(clientId:any)=>{
    ElMessageBox.confirm(
    '确认删除吗',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
        Wwrite.post("w2-write/api/Client/DelCLient",{
        clientId :clientId
      })
      .then(res=>{
        if(res.data.code == 100){
            ElMessage.success(res.data.msg);
            Show();
        }
        else{
            ElMessage.error(res.data.msg);
            return;
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
}


///修改所选数据
const Upd=(clientId:any)=>{
    router.push({
        path:'/UpdClient',
        query:{clientId:clientId}
    })
}

</script>